<!DOCTYPE html>
<html>
<head>
  <title>用户登录</title>
  <link rel="stylesheet" href="resources/layui/css/layui.css">
</head>
<body>
<div style="width: 400px;height: 300px;position: absolute;top: 50%;left: 50%;margin-top: -125px;margin-left: -200px;border: #dddddd 1px solid;box-shadow:  2px 2px 10px #909090">
  <form class="layui-form layui-form-pane">
    <p style="text-align: center;height: 40px;line-height: 40px;font-size: 25px;font-weight: bold;color: #009688;margin-bottom: 10px;margin-top: 20px;">分享书屋·登录</p>
    <div class="layui-form-item" style="margin-left: 30px;">
      <label class="layui-form-label">用户名</label>
      <div class="layui-input-inline">
        <input type="text"  autocomplete="off" value="admin"  name="username" class="layui-input" placeholder="用户名" lay-verify="required" lay-reqText="请输入用户名" >
      </div>
    </div>
    <div class="layui-form-item" style="margin-left: 30px;">
      <label class="layui-form-label">密码</label>
      <div class="layui-input-inline">
        <input type="text"  autocomplete="off" value="12345"  name="password" class="layui-input" placeholder="密码" lay-verify="required" lay-reqText="请输入密码" >
      </div>
    </div>
    <div class="layui-form-item" style="margin-left: 30px;width: 300px">
      <div id="slider"></div>
    </div>
    <div class="layui-form-item" style="margin-left: 30px;margin-top: 30px">
      <div class="layui-input-inline">
        <button class="layui-btn" style="width: 300px" type="button" lay-submit id="subBtn" lay-filter="subBtnFilter">登录</button>
      </div>
    </div>
  </form>
</div>
<script>
  let cxt = "${request.contextPath}";
</script>
<script src="resources/layui/layui.js"></script>
<script>
  layui.config({
    base: cxt+'/resources/sliderVerify/'
  }).use(['form','jquery','layer','sliderVerify'],function () {
    let form = layui.form;
    let $ = layui.jquery;
    let layer = layui.layer;
    let sliderVerify = layui.sliderVerify;
    //初始化滑块
    let slider = sliderVerify.render({
      elem: '#slider'
    })
    //表单的提交事件
    form.on("submit(subBtnFilter)",function (d) {
      let param = d.field;//获取表单数据
      $.post(cxt+"/sysuser/login.do",param,function (rs) {
        if(rs.code != 200){
          layer.msg(rs.msg);
          //滑块重置
          slider.reset();
          return false;
        }
        //跳转到管理界面主页
        location.href = cxt+"/page/main.do";
      })
      return false;//阻止表单默认提交行为
    })
  })
</script>
</body>
</html>
